<template>
	<!--父级调用 FlowModel -->
	<div>
		<div>
			<template v-if="flowNodes">
				<a-steps :current="flowNodeIdx" direction="vertical">
					<a-step v-for="node in flowNodes" :key="node.id">
						<template #icon>
							<a-avatar :style="{background: node.idx === flowNodeIdx?'#1890ff':''}">
								<template #icon>
									<div>{{ node.idx }}</div>
								</template>
							</a-avatar>
						</template>
						<template #title>
							<div v-if="node.roles">{{ node.roles.name }}</div>

							<flowNodeStatusButton :status="node.status" :disabled="node.status === 2 || node.status === -1 || node.status === 1" :last-status="getDepartmentStatus(node.role_id)" @click="showFlowModel(node)"></flowNodeStatusButton>
							<div v-if="node.remark">备注：{{ node.remark }}</div>
							<div v-if="node.user != null">操作人: {{ node.user.fullname }}</div>
						</template>
						<template #description>
							<span>{{ node.update_time }}</span>
						</template>
					</a-step>
					<!-- <a-step>
						<template #icon>
							<a-avatar :style="{background: showEdit?'#1890ff':''}">

							</a-avatar>
						</template>
						<template #title>
							<a-button
								v-permission="['admin','flowNode:updatelast']"
								:disabled="!showEdit"
								@click="addFlowNode()"
							>修改尾节点状态</a-button>
						</template>
					</a-step>-->
				</a-steps>
			</template>
		</div>
		<flowNodeForm ref="flowNodeFormRef" @change="onChange"></flowNodeForm>
	</div>
</template>
<script setup>
/**
 * 项目节点状态操作
 */
import { ref, watch, reactive, onMounted, getCurrentInstance, inject } from "vue";

const { proxy } = getCurrentInstance();
import { post } from "../utils";
// import flowNodeStatusButton from "@/components/FlowNodeStatusButton";
// import flowNodeForm from "@/components/flowNodeForm";
import dayjs from "dayjs";
const roles = ref();
const flowNodeIdx = ref();
const flowSource = ref({});
const flowNodes = ref([]);
const params = reactive({});
const props = defineProps({
	showEdit: {
		type: Boolean,
		required: false,
		default: true
	},
	flowId: {
		type: Number,
		required: true,
		default: 0
	}, // 模块标识
	moduleId: {
		type: String,
		required: false,
		default: ""
	},
	// 模块下内容id
	itemId: {
		type: Number,
		required: false,
		default: 0
	},
	data: {
		type: Object,
		required: false,
		default: null
	}
});
const setParams = data => {
	params.id = data.flowId;
	params.module_id = data.moduleId;
	params.id = data.flowId;
	params.item_id = data.itemId;
};
const getData = val => {
	if (val !== null) {
		setData(val);
	} else {
		restData();
	}
};
//定义emit
const emit = defineEmits(["change"]);
onMounted(async () => {
	setParams(props);
	getData(props.data);
	emit("change", { act: "onMounted" });
	// restData();
	// console.log(props);
});
const getDepartmentStatus = id => {
	var status = 0;
	// console.log(flowSource.value);
	if (flowSource.value || flowSource.value.flowType || flowSource.value.flowType.roles) {
		var deps = flowSource.value.flowType.roles;
		// console.log(deps);
		deps.filter(e => {
			if (id === e.id) {
				status = e.status;
				return e;
			}
		});
	}

	return status;
};
// watch(flowSource, (val) => {
// 	console.log(val, "change2");

// });
const setFlowNodes = data => {};
const setData = data => {
	params.id = data.id;
	var deps = data.flowType.roles;

	flowSource.value = { ...data };
	var idx = 1;
	flowNodes.value = data.flowNodes.filter(e => {
		if (flowNodeIdx.value === 0 && e.status === 0) {
			// console.log(idx);
			flowNodeIdx.value = idx;
		}
		deps = deps.filter(dep => {
			if (dep.id === e.role_id) {
				dep.status = e.status;
			}
			return dep;
		});

		e.idx = idx;
		e.update_time = dayjs(e.update_time).format("YYYY-MM-DD HH:mm:ss");
		idx++;
		return e;
	});

	roles.value = deps;
	if (flowNodeIdx.value === 0) {
		flowNodeIdx.value = flowNodes.value.length;
	}
	// emit("change", { act: "setData", data });
};
const restData = () => {
	post("flow/info", params).then(data => {
		setData(data);
		emit("change", { act: "restData", data });
		// console.log(flowSource.value)
	});
};

watch(props, val => {
	if (val) {
		setParams(val);
	}
	// getData(val.data);
});

const flowNodeFormRef = ref(null);
// 超权限创建新节点
const addFlowNode = (item, depts) => {
	var record = item || flowNodes.value[flowNodes.value.length - 1];
	flowNodeFormRef.value.showFlowModel(record, depts || roles.value);
};
//  打开表单
const showFlowModel = (record, depts) => {
	flowNodeFormRef.value.showFlowModel(record, depts || roles.value);
};

const onChange = e => {
	restData();
};
defineExpose({ restData, setData, setParams, addFlowNode, showFlowModel });
</script>